<template>
  <view class="box" @click="external">
    <view class="tou top fixed" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image
        @click.stop="fanhui"
        class="image1"
        src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png"
      />
      <!-- #ifndef MP-WEIXIN -->
      车主服务
      <!-- #endif -->
      <!-- #ifdef MP-WEIXIN -->
      <text style="position: absolute; left: 50%; transform: translateX(-50%)">车主服务</text>
      <!-- #endif -->
      <image
        @click.stop="sousuo"
        class="image2"
        src="https://pic.bangbangtongcheng.com/static/sousuo.png"
        mode="widthFix"
      />
    </view>
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'"></view>
    <view class="bannerBox" :class="scrollTop > 20 ? 'Ptop' : ''">
      <view class="banner">
        <swiper
          style="min-height: 0rpx; height: 345rpx"
          class="screen-swiper square-dot"
          :indicator-dots="true"
          :circular="true"
          :autoplay="true"
          indicator-active-color="#ffffff"
          interval="5000"
          duration="500"
        >
          <swiper-item
            v-for="(item, index) in bannerList"
            :key="index"
            @click.stop="bannerD(item.id)"
          >
            <view style="width: 690rpx; height: 346rpx; background-color: #ffffff">
              <image :src="imgUrl + item.picturePath" mode="aspectFill" />
              <view class="byTitle"
                ><span>{{ item.title }}</span></view
              >
            </view>
          </swiper-item>
        </swiper>
      </view>
    </view>
    <!--  -->
    <view>
      <view
        class="tower-swiper"
        @touchmove="TowerMove"
        @touchstart="TowerStart"
        @touchend="TowerEnd"
      >
        <view
          class="tower-item"
          :class="item.zIndex == 1 ? 'none' : ''"
          v-for="(item, index) in bannerList1"
          :key="index"
          :style="{ '--index': item.zIndex, '--left': item.mLeft }"
          :data-direction="direction"
          @click.stop="bannerD(item.id)"
        >
          <view class="swiper-item" style="box-shadow: 10rpx #ccc">
            <image :src="imgUrl + item.picturePath" mode="aspectFill" />
          </view>
        </view>
      </view>
    </view>
    <view
      class="cu-list grid col-3 no-border"
      style="margin-left: 30rpx; width: 690rpx; margin-top: 20rpx; justify-content: space-around"
    >
      <view class="cu-item" @click="tiaozhuan(1)">
        <view class="img" style="display: flex; align-items: center; justify-content: center">
          <image
            style="width: 100%; height: 100%"
            src="https://pic.bangbangtongcheng.com/static/bbcz/mrzs01.png"
          />
        </view>
        <text style="font-size: 30rpx; color: #333333">美容装饰</text>
      </view>
      <view class="cu-item" @click="tiaozhuan(2)">
        <view class="img" style="display: flex; align-items: center; justify-content: center">
          <image
            style="width: 100%; height: 100%"
            src="https://pic.bangbangtongcheng.com/static/bbcz/wxby01.png"
          />
        </view>
        <text style="font-size: 30rpx; color: #333333">维修保养</text>
      </view>
    </view>
    <view class="list">
      <view class="tit">
        <span style="margin-left: 20rpx">精选推荐</span>
        <view class="sai" @click.stop="showModal" data-target="DrawerModalR">
          筛选
          <span>▼</span>
        </view>
      </view>
      <view class="liss" v-for="(item, index) in Recommend" :key="index" @click="details(item.id)">
        <image mode="aspectFit" :src="item.coverPhoto" />
        <view class="li_3" style="max-width: 336rpx">
          <view class="servicesAvailable">{{ item.title }}</view>
          <view class="serviceContent">
            {{ item.entryDescription }}
          </view>
        </view>
      </view>
      <view v-if="Recommend.length == 0" class="none">
        <image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
        <view>没有更多数据了</view>
      </view>
      <view class="down" v-show="Recommend.length != 0 && !downStatus">没有更多了</view>
    </view>
    <view
      class="cu-modal drawer-modal justify-end"
      @click.stop="hideModal()"
      :class="modalName == 'DrawerModalR' ? 'show' : ''"
      @touchmove.stop.prevent=""
    >
      <view
        class="tittit"
        :style="[
          {
            top: 'calc(' + CustomBar1 + 'px' + ' + 36px )',
          },
        ]"
      >
        <view @click="hideModal()">×</view>筛选
      </view>

      <view
        class="basis-lg"
        style="background-color: #ffffff; position: relative"
        :style="[
          {
            top: 'calc(' + CustomBar1 + 'px' + ' + 36px )',
            height: 'calc(100vh - ' + CustomBar1 + 'px - 36px)',
          },
        ]"
      >
        <scroll-view
          scroll-y="true"
          :style="{ height: 'calc(100vh - ' + CustomBar1 + 'px - 36px)' }"
        >
          <view class="cu-list menu text-left">
            <view style="height: 80rpx"> </view>
            <view class="leibie">
              服务类型
              <view class="list">
                <view
                  @click.stop="type1Click(index)"
                  :class="item.active ? 'li xuan' : 'li'"
                  v-for="(item, index) in type1"
                  :key="index"
                  >{{ item.valueName }}</view
                >
              </view>
            </view>
            <view class="leibie">
              服务项目
              <view class="list">
                <view
                  @click.stop="type2Click(index)"
                  :class="item.active ? 'li xuan' : 'li'"
                  v-for="(item, index) in type2"
                  :key="index"
                  >{{ item.valueName }}</view
                >
              </view>
            </view>
            <view class="leibie">
              免费项目
              <view class="list">
                <view
                  @click.stop="type3Click(index)"
                  :class="item.active ? 'li xuan' : 'li'"
                  v-for="(item, index) in type3"
                  :key="index"
                  >{{ item.valueName }}</view
                >
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="di">
        <view class="div l" @click.stop="cz">重置</view>
        <view class="div r" @click.stop="sx">确定</view>
      </view>
    </view>
    <view v-if="scrollTop > 20" class="hui" @click.stop="totop">
      <image src="https://pic.bangbangtongcheng.com/static/top.png" />返回顶部
    </view>
    <uniBall></uniBall>
  </view>
</template>

<script>
  import permision from '@/js_sdk/wa-permission/permission.js'
  import { mapGetters } from 'vuex'
  let statusBarHeight
  //#ifdef H5
  import wxshare from '../../utils/index.js'
  statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44
  //#endif
  // #ifdef APP-PLUS
  statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44
  //  #endif
  // #ifdef MP-WEIXIN
  statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 5 + 88
  //  #endif
  import Tabbar from '@/components/tabbar.vue'
  import { log } from 'util'
  export default {
    data() {
      return {
        statusBarHeight,
        modalName: '',
        bannerList: [],
        bannerList1: [],
        towerStart: 0,
        direction: '',
        Recommend: [],
        imgUrl: this.$imgSrc,
        trigger: false,
        downStatus: true,
        upStatus: true,
        scrollTop: '0',
        ownerData: {
          pageSize: 10,
          pageNo: 1,
          longitude: '',
          latitude: '',
          serviceType: '',
          entryName: '',
          whetherFreeService: '',
        },
        CustomBar1: '',
        type1: [
          {
            id: 1,
            valueName: '美容装饰',
            active: false,
          },
          {
            id: 2,
            valueName: '维修保养',
            active: false,
          },
        ],
        type2: [],
        type3: [
          {
            id: 0,
            valueName: '是',
            active: false,
          },
          {
            id: 1,
            valueName: '否',
            active: false,
          },
        ],
      }
    },
    components: {
      'view-tabbar': Tabbar,
    },
    filters: {
      nums(val) {
        return val.toFixed(2)
      },
    },
    computed: {
      ...mapGetters(['statusBarHeight1', 'userinfo']),
    },
    onPageScroll: function (Object) {
      this.scrollTop = Object.scrollTop
    },
    onLoad() {
      var that = this
      this.getBanner()
      this.getBanner1()
      this.getLocation()
      this.getType()
      this.CustomBar1 = this.CustomBar
      // 初始化towerSwiper 传已有的数组名即可
      /* #ifdef H5 */
      this.jinzhi()
      /* #endif */
    },
    onReachBottom() {
      this.down()
    },
    async onPullDownRefresh() {
      this.Recommend = []
      this.ownerData.pageNo = 1
      this.downStatus = true
      if (this.upStatus) {
        this.trigger = true
        await this.getLocation()
      }
    },
    methods: {
      external() {
        this.modalName = ''
      },
      fanhui() {
        uni.navigateBack({
          delta: 1,
        })
      },
      getBanner() {
        this.$myRequest
          .get('/api/mobile/vehicleOwner/getCarouselChartsByType', {
            carouselType: '1',
            type: '6',
          })
          .then((res) => {
            this.bannerList = res.carouselChartsList.pageList
          })
      },
      jinzhi() {
        let _this = this
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: {
            url: param,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            _this.jinzhifx(re.data)
          },
        })
      },
      jinzhifx(data) {
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ['hideMenuItems'],
        })
        // 禁止分享
        wxshare.hideMenuItems({
          // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          menuList: [
            'menuItem:share:appMessage',
            'menuItem:share:timeline',
            'menuItem:share:timeline',
            'menuItem:share:qq',
            'menuItem:favorite',
            'menuItem:share:QZone',
            'menuItem:openWithSafari',
          ],
        })
      },
      cz() {
        this.type1.forEach((el) => {
          el.active = false
          this.ownerData.serviceType = ''
        })
        this.type2.forEach((el) => {
          el.active = false
          this.ownerData.entryName = ''
        })
        this.type3.forEach((el) => {
          el.active = false
          this.ownerData.whetherFreeService = ''
        })
        this.Recommend = []
        this.ownerData.pageNo = 1
        this.downStatus = true
        // this.modalName = null;
        this.getRecommend()
      },
      sx() {
        let that = this
        that.ownerData.serviceType = ''
        that.ownerData.entryName = ''
        that.ownerData.whetherFreeService = ''
        this.type1.forEach((el) => {
          if (el.active == true) {
            that.ownerData.serviceType = el.id
          }
        })
        let entryName = []
        this.type2.forEach((el) => {
          if (el.active == true) {
            entryName.push(el.valueName)
          }
        })
        that.ownerData.entryName = entryName.join(',')
        this.type3.forEach((el) => {
          if (el.active == true) {
            that.ownerData.whetherFreeService = el.id == 1 ? 0 : 1
          }
        })
        this.Recommend = []
        this.ownerData.pageNo = 1
        this.downStatus = true
        this.modalName = null
        this.getRecommend()
      },
      showModal(e) {
        this.modalName = e.currentTarget.dataset.target
      },
      hideModal(e) {
        this.modalName = null
      },
      getBanner1() {
        var that = this
        this.$myRequest
          .get('/api/mobile/vehicleOwner/getCarouselChartsByType', {
            carouselType: '1',
            type: '7',
          })
          .then((res) => {
            this.bannerList1 = res.carouselChartsList.pageList
            this.TowerSwiper('bannerList1')
            setInterval(function () {
              that.direction = 'left'
              that.TowerEnd()
            }, 5000)
          })
      },
      totop() {
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 300,
        })
      },
      sousuo() {
        // if (!this.userinfo.phone) {
        // 	uni.showToast({
        // 		title: "请登录",
        // 		icon: "none",
        // 		mask: true
        // 	});
        // 	return;
        // }
        uni.navigateTo({
          url: '/pages_owner/release/searchPage?searchType=5',
        })
      },
      down() {
        if (this.downStatus) {
          this.ownerData.pageNo++
          this.getRecommend()
        }
      },
      async up() {
        this.Recommend = []
        this.ownerData.pageNo = 1
        this.downStatus = true
        if (this.upStatus) {
          this.trigger = true
          await this.getRecommend()
        }
      },
      getType() {
        let that = this
        this.$myRequest
          .get('/api/mobile/vehicleOwner/queryDataDictionaryList', {
            type: '2',
          })
          .then((res) => {
            res.dataDictionaryList.forEach((el) => {
              el.active = false
              if (el.type == 2) {
                that.type2.push(el)
              }
            })
          })
      },
      getRecommend() {
        this.upStatus = false
        console.log(this.ownerData)
        this.$myRequest
          .get('/api/mobile/vehicleOwner/getOwnerServices', this.ownerData)
          .then((res) => {
            uni.hideLoading()
            if (!res.ownerServiceList.pageList.length) {
              this.downStatus = false
            }
            if (res.ownerServiceList.pageCount < this.ownerData.pageNo * this.ownerData.pageSize) {
              this.downStatus = false
            }
            this.upStatus = true
            this.trigger = false
            this.Recommend = this.Recommend.concat(res.ownerServiceList.pageList)
            uni.stopPullDownRefresh()
          })
      },
      // 轮播图跳转
      bannerD(id) {
        uni.navigateTo({
          url: '/pages/index/bannerData?id=' + id,
        })
      },
      tiaozhuan(num) {
        if (num == 1) {
          uni.navigateTo({
            url: '/pages_owner/ownerService/beautyDecorationService',
          })
        } else if (num == 2) {
          uni.navigateTo({
            url: '/pages_owner/ownerService/maintenanceService',
          })
        }
      },
      details(id) {
        uni.navigateTo({
          url: '/pages_owner/ownerService/servicesAvailableDetails?id=' + id,
        })
      },
      type1Click(index) {
        let that = this
        this.type1.forEach((el, index1) => {
          if (index == index1) {
            that.$set(that.type1[index1], 'active', !el.active)
          } else {
            that.type1[index1].active = false
          }
        })
      },
      type2Click(index) {
        let that = this
        this.type2.forEach((el, index1) => {
          if (index == index1) {
            that.$set(that.type2[index1], 'active', !el.active)
          }
        })
      },
      type3Click(index) {
        let that = this
        this.type3.forEach((el, index1) => {
          if (index == index1) {
            that.$set(that.type3[index1], 'active', !el.active)
          } else {
            that.type3[index1].active = false
          }
        })
      },
      // towerSwiper
      // 初始化towerSwiper
      TowerSwiper(name) {
        let list = this[name]
        for (let i = 0; i < list.length; i++) {
          list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
          list[i].mLeft = i - parseInt(list.length / 2)
        }
        this.swiperList = list
      },
      // towerSwiper触摸开始
      TowerStart(e) {
        this.towerStart = e.touches[0].pageX
      },
      // towerSwiper计算方向
      TowerMove(e) {
        this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
      },

      // towerSwiper计算滚动
      TowerEnd(e) {
        let direction = this.direction
        let list = this.swiperList
        if (direction == 'right') {
          let mLeft = list[0].mLeft
          let zIndex = list[0].zIndex
          for (let i = 1; i < this.swiperList.length; i++) {
            this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
            this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
          }
          this.swiperList[list.length - 1].mLeft = mLeft
          this.swiperList[list.length - 1].zIndex = zIndex
        } else {
          let mLeft = list[list.length - 1].mLeft
          let zIndex = list[list.length - 1].zIndex
          for (let i = this.swiperList.length - 1; i > 0; i--) {
            this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
            this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
          }
          this.swiperList[0].mLeft = mLeft
          this.swiperList[0].zIndex = zIndex
        }
        this.direction = ''
        this.swiperList = this.swiperList
      },
      // 获取位置
      async getLocation() {
        this.getLocation1()
      },
      getLocation1() {
        let _this = this
        uni.showLoading({
          title: '加载中',
          mask: true,
        })
        uni.getLocation({
          type: 'gcj02',
          highAccuracyExpireTime: '3000',
          success(res) {
            _this.ownerData.latitude = res.latitude
            _this.ownerData.longitude = res.longitude
            uni.setStorageSync('locationState', 1)
            _this.getRecommend()
          },
          fail(res) {
            console.log(res, '经纬度没有授权')
            uni.setStorageSync('locationState', 0)
            if (uni.getStorageSync('locationState') == 0) {
              uni.showModal({
                title: '提示',
                content: '您已关闭位置权限或获取位置信息失败',
                success: function (res) {
                  if (res.confirm) {
                    if (plus.os.name === 'iOS') {
                      plus.runtime.openURL('app-settings://')
                    } else {
                      var Intent = plus.android.importClass('android.content.Intent')
                      var Settings = plus.android.importClass('android.provider.Settings')
                      var Uri = plus.android.importClass('android.net.Uri')
                      var mainActivity = plus.android.runtimeMainActivity()
                      var intent = new Intent()
                      intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS)
                      var uri = Uri.fromParts('package', mainActivity.getPackageName(), null)
                      intent.setData(uri)
                      mainActivity.startActivity(intent)
                    }
                  } else if (res.cancel) {
                    console.log('用户点击取消')
                  }
                },
              })
              return false
            }
          },
        })
      },
    },
  }
</script>

<style lang="less" scoped>
  .tittit {
    position: fixed;
    top: 0;
    right: 0;
    background-color: #f8f8f8;
    z-index: 9999;
    max-width: 100%;
    width: 600rpx;
    transition-duration: 0.3s;
    transform: translateX(100%);

    text-align: center;
    line-height: 80rpx;
    font-size: 30rpx;
    border-bottom: 2rpx solid #cccccc;

    view {
      position: absolute;
      top: 0rpx;
      left: 20rpx;
      color: #999999;
      font-size: 54rpx;
      font-weight: 100;
    }
  }

  .show .tittit {
    transform: translateX(0%);
  }

  .box {
    width: 100%;
    min-height: 100vh;
    // padding-bottom: 120rpx;
    background-color: #fff;
  }

  .tou {
    position: relative;
    width: 100%;
    text-align: center;
    line-height: 88rpx;
    font-size: 36rpx;
    color: #fff;
    background-color: #64b6a8;
    /* #ifdef MP-WEIXIN */
    text-align: left;
    display: flex;
    align-items: center;

    /* #endif */
    .image1 {
      position: absolute;
      width: 32rpx;
      height: 32rpx;
      // top: 116rpx;
      left: 30rpx;
    }

    .image2 {
      position: absolute;
      width: 56rpx;
      height: 56rpx;
      bottom: 16rpx !important;
      // top: 30%;
      // // /* #ifdef APP-PLUS || H5 */
      // top: 50%;
      // /* #endif */
      right: 30rpx;
      /* #ifdef MP-WEIXIN */
      position: initial;
      margin-left: auto;
      margin-right: 200rpx;
      /* #endif */
      // #ifdef APP
      // top: 50%;
      // #endif
    }
  }

  .bannerBox {
    width: 100%;
    height: 400rpx;
    background: #64b6a8;
    padding-top: 28rpx;
    margin-top: -4rpx;

    .banner {
      margin-left: 30rpx;
      width: 690rpx;
      height: 346rpx;
      overflow: hidden;
      border-radius: 24rpx;
      .byTitle {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.1);

        span {
          width: 650rpx;
          padding: 0 20rpx;
          position: absolute;
          bottom: 46rpx;
          font-size: 34rpx;
          font-weight: 500;
          color: #ffffff;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
  }

  .list {
    margin-top: 10rpx;
    margin-left: 30rpx;
    width: 720rpx;

    .tit {
      width: 100%;
      display: flex;
      justify-content: space-between;
      color: #333333;
      font-weight: 600;
      font-size: 36rpx;
      margin-bottom: 30rpx;

      .sai {
        font-size: 32rpx;
        margin-right: 30rpx;
        display: flex;
        align-items: center;
        color: #64b6a8;

        span {
          margin-left: 12rpx;
          font-size: 20rpx;
        }
      }
    }

    .liss {
      width: 96%;
      padding-bottom: 30rpx;
      margin-bottom: 30rpx;
      border-bottom: 2rpx solid #e0e0e0;
      display: flex;
      // justify-content: space-between;

      image {
        background-color: #f8f8f8;
        width: 300rpx;
        height: 200rpx;
        border-radius: 20rpx;
      }

      .li_3 {
        margin-left: 24rpx;
        .servicesAvailable {
          font-size: 32rpx;
          font-weight: 500;
          color: #64b6a8;
          margin-bottom: 20rpx;
        }
        .serviceContent {
          font-size: 24rpx;
          font-weight: 400;
          color: #333333;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
      }
    }

    .li:last-child {
      border-bottom: 0rpx solid #e0e0e0;
    }
  }

  .hui {
    position: fixed;
    right: 30rpx;
    bottom: 154rpx;
    display: flex;
    align-items: center;
    padding: 10rpx 20rpx;
    background-color: #fff;
    border-radius: 34rpx;
    font-size: 26rpx;
    box-shadow: 0px 0px 36rpx rgba(0, 0, 0, 0.16);

    image {
      width: 46rpx;
      height: 46rpx;
      margin-right: 18rpx;
    }
  }

  .cu-item .img {
    width: 80rpx;
    height: 80rpx;
    margin-left: 50%;
    transform: translateX(-50%);
  }

  .cu-item text {
    font-size: 28rpx;
    color: #333333;
  }

  .cu-list {
    padding-bottom: calc(98rpx + env(safe-area-inset-bottom) / 2);

    .tit {
      position: relative;
      width: 100%;
      height: 80rpx;
      text-align: center;
      line-height: 80rpx;
      font-size: 30rpx;
      border-bottom: 2rpx solid #cccccc;

      view {
        position: absolute;
        top: 0rpx;
        left: 20rpx;
        color: #999999;
        font-size: 54rpx;
        font-weight: 100;
      }
    }

    .leibie {
      margin-top: 40rpx;
      font-size: 28rpx;
      margin-left: 40rpx;
      margin-right: 20rpx;

      .list {
        width: 100%;
        margin-top: 24rpx;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .li {
          min-width: 90rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 10rpx 20rpx;
          background: #f2f2f2;
          border-radius: 30rpx;
          margin-right: 24rpx;
          margin-bottom: 24rpx;
        }

        .xuan {
          background: #64b6a8;
          color: #fff;
        }
      }
    }

    .quyu {
      margin-top: 40rpx;
      font-size: 28rpx;
      margin-left: 40rpx;

      .list {
        width: 100%;
        margin-top: 24rpx;

        .li {
          display: inline-block;
          text-align: center;
          width: 154rpx;
          height: 60rpx;
          line-height: 60rpx;
          background: #f2f2f2;
          border-radius: 30rpx;
          margin-right: 24rpx;
          margin-bottom: 24rpx;
        }

        .xuan {
          background: #64b6a8;
          color: #fff;
        }
      }
    }

    .jiage {
      margin-top: 40rpx;
      font-size: 28rpx;
      margin-left: 40rpx;

      .list {
        width: 100%;
        margin-top: 24rpx;

        .li {
          display: inline-block;
          text-align: center;
          width: 214rpx;
          height: 60rpx;
          line-height: 60rpx;
          background: #f2f2f2;
          border-radius: 30rpx;
          margin-right: 24rpx;
          margin-bottom: 24rpx;
        }

        .xuan {
          background: #64b6a8;
          color: #fff;
        }
      }
    }

    .mianji {
      margin-top: 40rpx;
      font-size: 28rpx;
      margin-left: 40rpx;

      .list {
        width: 100%;
        margin-top: 24rpx;

        .li {
          display: inline-block;
          text-align: center;
          width: 214rpx;
          height: 60rpx;
          line-height: 60rpx;
          background: #f2f2f2;
          border-radius: 30rpx;
          margin-right: 24rpx;
          margin-bottom: 24rpx;
        }

        .xuan {
          background: #64b6a8;
          color: #fff;
        }
      }
    }

    .loucen {
      margin-top: 40rpx;
      font-size: 28rpx;
      margin-left: 40rpx;

      .list {
        width: 100%;
        margin-top: 24rpx;

        .li {
          display: inline-block;
          text-align: center;
          width: 154rpx;
          height: 60rpx;
          line-height: 60rpx;
          background: #f2f2f2;
          border-radius: 30rpx;
          margin-right: 24rpx;
          margin-bottom: 24rpx;
        }

        .xuan {
          background: #64b6a8;
          color: #fff;
        }
      }
    }
  }

  .cu-dialog {
    max-width: 100%;
    width: 600rpx;
  }
  .show .basis-lg {
    transform: translateX(0%);
  }
  .basis-lg {
    flex-basis: 600rpx;
    transform: translateX(100%);
    transition: 0.3s;
    overflow: auto;
  }

  .di {
    position: fixed;
    width: 100%;
    bottom: 0rpx;
    left: 74rpx;

    .div {
      padding-bottom: calc(env(safe-area-inset-bottom) / 2);
      height: calc(env(safe-area-inset-bottom) / 2 + 98rpx);
      display: inline-block;
      width: 300rpx;
      text-align: center;
      line-height: 98rpx;
      font-size: 30rpx;
    }

    .l {
      background: #e0e0e0;
    }

    .r {
      background: #64b6a8;
      color: #fff;
    }
  }

  .tower-swiper {
    height: 300rpx;
    transform: scale(1);
  }

  .tower-swiper .tower-item {
    transform: scale(calc(0.6 + var(--index) / 10));
    margin-left: calc(var(--left) * 110upx - 135upx);
    z-index: var(--index);
    width: 360rpx;
    height: 260rpx;
    left: 44%;
    box-shadow: 0px 13px 12px rgba(0, 0, 0, 0.2);
  }

  .tower-swiper .tower-item.none {
    opacity: 1;
  }

  .Ptop {
    /* #ifdef H5 || APP-PULS */
    // padding-top: 104rpx;
    margin-top: 98rpx;
    /* #endif */

    /* #ifdef MP  */
    // margin-top: 188rpx;
    /* #endif */
  }

  .fixed {
    // display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 40;
  }

  .down {
    height: 60rpx;
    line-height: 60rpx;
    // border-top: 2rpx solid #d0d0d0;
    text-align: center;
  }

  .none {
    text-align: center;

    image {
      width: 430rpx;
      margin-bottom: 16rpx;
    }

    view {
      height: 40rpx;
      line-height: 40rpx;
      color: #666;
    }
  }

  .shangb {
    position: absolute;
    /* top: 0px; */
    left: 30rpx;
    width: 104rpx;
    height: 85rpx;
  }
</style>
